<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2048</title>
	<link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="animator.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		html {
			font-size: 0px;
		}
		
		body {
			font-size: .16rem;
			/* 默认字体大小16px */
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="body">
			<div class="title">2048</div>
			<div class="score_msg">
				<div class="score">
					<div>SCORE</div>
					<div class="score_num">{{score}}</div>
				</div>
			</div>
			<div class="btn">
				<div>
					<button class="file_on" @click="fileOn">存档</button>
					<button  @click="fileRead">读档</button>
				</div>
				<div>
					<button @click="revocation">撤销</button>
				</div>
			</div>
			<div class="btn active">
				<button @click="again" class="again">重新开始</button>
			</div>
			<div class="content" v-swipeleft="{fn:vuetouch,name:'left'}" v-swiperight="{fn:vuetouch,name:'right'}" v-swipeup="{fn:vuetouch,name:'up'}" v-swipedown="{fn:vuetouch,name:'down'}" @touchmove.prevent>
				<div v-for="item in gameMsg" class="row">
					<div v-for="val in item" class="every" :class="{RubberBand:val.classFlag}" :style="{ backgroundColor : val.num ? val.color : '#C9BDAF' }" >
						{{val.num | zero}}
					</div>
				</div>
				<div class="game_over" v-if="isOverFlag" @click="again">
					游戏结束
				</div>
			</div>
			<div class="tip" v-show="tip" :class="tipClass">
				<div>{{tip}}</div>
				<div class="sure" @click="sure">确定</div>
			</div>			
		</div>
	</div>
	<script src="js/vue.min.js"></script>
	<script src="js/touch.js"></script>
	<script src="js/game.js"></script>
</body>
</html>